<template>
  <div class="list">
    <ul class="frient-list" v-if="list.length">
      <li
        v-for="(item, index) in list"
        :key="index"
        @click="handleClick(index)"
        v-bind:class="{ active: currentWindowObject === index }"
        v-show="search(item.username)"
      >
        <div class="item-img" v-bind:class="{'new-msg': item.newMsg}">
          <img src="static/background.jpg" alt="">
        </div>
        <div class="item-info" v-if="group">
          <div class="item-name" :title="item.name">{{ item.name }}</div>
          <div class="item-msg">{{ last_msg(item.chatHistory) }}</div>
        </div>
        <div class="item-info" v-else>
          <div class="item-name" :title="item.username">{{ item.username }}</div>
          <div class="item-msg">{{ last_msg(chatHistory[item.uuid]) }}</div>
        </div>
      </li>
    </ul>
    <div v-else class="empty">
      {{ empty ? empty : '暂时没有其他用户在线' }}
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
export default {
  name: 'List',
  props: {
    list: Array,
    empty: String,
    group: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    ...mapState([
      'currentWindowObject',
      'chatHistory',
      'onLineSearch'
    ])
  },
  methods: {
    last_msg (data) {
      if (data !== undefined && data.length > 0) {
        if (data[data.length - 1].type === 'image') {
          return '[图片]'
        } else {
          return data[data.length - 1].data
        }
      } else {
        return ''
      }
    },
    handleClick (key) {
      this.tapChat({
        key,
        group: this.group
      })
    },
    search (username) {
      if (this.onLineSearch === '') {
        return true
      } else {
        return username.indexOf(this.onLineSearch) > -1
      }
    },
    ...mapActions({
      tapChat: 'tapChat'
    })
  }
}
</script>

<style lang="stylus" scoped>
  .list
    height 562px
    overflow auto
    overflow-x hidden
    .frient-list
      color red
      li
        max-width 100%
        height 40px
        background #393d44
        border-bottom 1px solid #555
        padding 12px 18px
        cursor pointer
        .item-img
          float left
          position relative
          img
            width 40px
            height 40px
            border-radius 3px
        .new-msg
          &:before
            content ''
            position absolute
            border-radius 50%
            top -5px
            left 35px
            width 10px
            height 10px
            background red
        .item-info
          width 85%
          height 40px
          margin-left 50px
          padding-top 2px
          .item-name
            color #fff
            font-size 16px
            overflow hidden
            white-space: nowrap
            text-overflow: ellipsis
          .item-msg
            color #999
            line-height 32px
            overflow hidden
            white-space: nowrap
            text-overflow: ellipsis
      li:last-child
        border-bottom 0
      li.active
        background #565758 !important
      li:hover
        background #434850
    .empty
      color #999
      text-align center
      margin-top 20px
</style>
